<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .comp-a,.comp-b,.comp-c{
            line-height: 40px;
            padding: 10px;
            margin: 10px auto;
            border: 1px dashed #333;
        }
    </style>
</head>
<body>
    <!-- <div dataIndex="1231"></div> -->
    <!-- 根组件 -->
    <div id="app">
        <p>count:{{count}}</p>
        <p><button @click="count++">count++</button></p>
        <hr>    

        <!-- props类型校验-->
        <!-- <laowang-a a="1" b="2"></laowang-a> -->
        <!-- <laowang-a :a="1" :b="2"></laowang-a> -->


        <!-- <laowang-b :a="1" :b="2"></laowang-b> -->
        <!-- <laowang-b></laowang-b> -->


        <!-- 自定义验证函数 -->
        <laowang-c :a="11"></laowang-c>
    </div>
</body>
<script>
    /*  

        组件通信: 父传子 (父组件传递数据  子组件接收数据)

        1. 父组件如何传递数据
            a. 父组件在使用子组件时,可以通过在子组件的<>内,通过html属性传递数据,到子组件 


            b. 父组件在使用子组件时,可以通过在子组件标签对内,传递html结构或文本到子组件内 (后面)


        2. 子组件如何收?    
            子组件接收父组件以html属性传递的数据时,需要先在子组件中配置props属性, 对应属性名接收数据 !! 
            a. 子组件在初始化渲染阶段接收数据(在子组件的配置项解析时一并处理), 并将其存储到当前子组件的vue实例中 ($props中也有一份)
            
            b. 使用时直接通过子组件的Vue实例使用即可


            注意:
            1. 父组件传入数据时,如果通过静态属性传入, 接收数据只能是字符串类型
               父组件传入数据时,如果通过动态属性传入(v-bind), 接收数据可以是任意类型的数据,也可以是父组件已有的数据

            2. 父组件传入数据时, HTML属性的属性名建议使用小写和中划线命名法 (html默认会将大写属性名转化为小写)

            3. 子组件接收父组件以中划线命名法格式传递的数据, props中可以通过中划线命名法或小驼峰命名接收, 但是存储到Vue实例上时都是小驼峰命名法
               

    
    */


   

    Vue.component("laowang-a",{
        // props选项如果是一个数组, 对应属性名接收父组件传入的数据, 至于数据格式不会进行校验
        // props: ["a","b"],
        template:`<div class="comp-a">
                    这是A组件
                </div>`,
        created () {
            console.log("子组件A",this);    
            console.log("子组件A",this.$props);    
            console.log("子组件A",this.a);    
        }
    })

    Vue.component("laowang-b",{
        // props选项是一个对象  => 对象的键名就是需要接收的属性名, 对象的键值就是需要接收的数据类型(通过构造函数显示)

        props: {
            // 只是添加类型限制
            // a:Number,   // 数字类型
            // b:[Number,String],  // 数字或字符串

            // 除添加类型限制以外, 还可以配置 默认值/是否必填
            a:{
                type:Number,   // 数字类型
                default: 0,   // 如果不传,默认为0
            },
            b:{
                type:Number,   // 数字类型
                required:true, // 必填
            }
        },
        template:`<div class="comp-b">
                    这是B组件 
                </div>`,
        created () {
            console.log("子组件B",this);    
            console.log("子组件B",this.$props);    
            // console.log("子组件C",this.a);   
        }
    })

    Vue.component("laowang-c",{
        props: {
            // 除添加类型限制以外, 还可以配置 默认值/是否必填
            a:{
                // type:Number,   // 数字类型
                // required:true, // 必填
                validator: function(val){ // 自定义校验函数   val形参,用于接收父组件传入的数据 => 如果函数return true=>校验成功 ,否则校验失败
                    console.log("自定义校验函数",val);
                    if(!val) return false;   // j校验失败
                    if(typeof val != "number") return false;


                    if(val >= 1 && val <= 10 && val % 1 == 0){
                        return true;
                    }else{
                        return false;
                    }

                }
            },
            // b:{
            //     type:Number,   // 数字类型
            //     required:true, // 必填
            // }
        },
        template:`<div class="comp-c">
                    这是C组件
                </div>`,
        created () {
            console.log("子组件C",this);    
            console.log("子组件C",this.$props);    
        }
    })
   

    // 根组件 => 挂载到页面最外层中 (所有组件,都是根组件的子组件)
    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        }
    })



</script>
</html>